<template>
  <view class="custom-table" :style="{ backgroundColor: tableBackgroundColor }">
    <!-- 表头 -->
    <view class="table-row table-header">
      <view
        v-for="(header, index) in headers"
        :key="index"
        class="table-cell"
        :style="{
          fontSize: headerFontSize + 'rpx',
          color: headerFontColor,
        }"
      >
        {{ header }}
      </view>
    </view>

    <!-- 表格内容 -->
    <view
      v-for="(row, rowIndex) in data"
      :key="rowIndex"
      class="table-row"
      :style="{ backgroundColor: rowIndex % 2 === 0 ? rowEvenColor : rowOddColor }"
    >
      <view
        v-for="(cell, cellIndex) in row"
        :key="cellIndex"
        class="table-cell"
        :style="{
          fontSize: cellFontSize + 'rpx',
          color: cellFontColor,
        }"
      >
        {{ cell }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 表头数据
    headers: {
      type: Array,
      default: () => [],
    },
    // 表格数据
    data: {
      type: Array,
      default: () => [],
    },
    // 表头字体大小（rpx）
    headerFontSize: {
      type: Number,
      default: 32,
    },
    // 表头字体颜色
    headerFontColor: {
      type: String,
      default: '#333',
    },
    // 单元格字体大小（rpx）
    cellFontSize: {
      type: Number,
      default: 28,
    },
    // 单元格字体颜色
    cellFontColor: {
      type: String,
      default: '#666',
    },
    // 表格背景颜色
    tableBackgroundColor: {
      type: String,
      default: '#fff',
    },
    // 偶数行背景颜色
    rowEvenColor: {
      type: String,
      default: '#f9f9f9',
    },
    // 奇数行背景颜色
    rowOddColor: {
      type: String,
      default: '#fff',
    },
  },
};
</script>

<style scoped>
.custom-table {
  width: 100%;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  overflow: hidden;
}

.table-row {
  display: flex;
}

.table-header {
  font-weight: bold;
  background-color: #f0f0f0;
}

.table-cell {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  border-right: 1rpx solid #ddd;
  border-bottom: 1rpx solid #ddd;
}

.table-cell:last-child {
  border-right: none;
}

.table-row:last-child .table-cell {
  border-bottom: none;
}
</style>